<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2 @click="clickBind()">Essential Links</h2>
    <router-link to="/Hello">code_click</router-link>
    <ul>
      <li v-for="item in list" v-bind:key="item.id" @click="code_li">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  beforeCreate: function () {
    console.log('页面初始化：beforeCreate')
  },
  created: function () {
    console.log('初始化完成：created')
  },
  beforeMount: function () {
    console.log('当组件template加载完成后：beforeMount')
  },
  mounted: function () {
    console.log('当页面加载完成后：mounted')
    // this.VueJsonp.get('http://127.0.0.1:8080/user/getAll').then( data => {
    //   console.log(data);
    // })
    this.$http.get('http://localhost:8081/api/user/getAll').then(function (response) {
      console.log('无奈啊')
      console.log(response.data)
      this.list = response.data
    })
      .catch(function (error) {
        console.log(error)
      })
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list: [
        {
          id: 1,
          name: 'young1'
        },
        {
          id: 2,
          name: 'young2'
        }
      ]
    }
  },
  methods: {
    clickBind: function () {
      alert(this.msg)
    },
    code_li: function () {
      alert(this.msg)
      var _this = this
      _this.$http.get('http://localhost:8081/api/user/getAll').then(function (response) {
        console.log('无奈啊')
        console.log(response.data)
        _this.list = response.data
      })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
